<template>
  <div id="" class="">
    <div class="content" align="left">
      <div class="content-box">
        <!-- 选择模块 填写标题 -->
        <p>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>发文章</el-breadcrumb-item>
          </el-breadcrumb>
        </p>
        <br />
        <p>
          <b-row>
            <b-col  style="min-width:120px">
              <b-form-select v-model="submitData.topicId" class="mb-3" required>
                <b-form-select-option :value="null"
                  >--请选择模块--</b-form-select-option
                >
                <b-form-select-option
                  v-for="({ topicName, id }, index) in moduleList"
                  :key="index"
                  :value="id"
                  :label="topicName"
                ></b-form-select-option>
              </b-form-select>
              <!-- <el-select v-model="submitData.topicId" placeholder="请选择模块">
                  <el-option
                    v-for="({ topicName, id }, index) in moduleList"
                    :key="index"
                    :label="topicName"
                    :value="id"
                  ></el-option>
                </el-select> -->
            </b-col>
            <b-col class="col-xs-1-12" cols="8"   style="min-width:120px">
              <b-form-input
                v-model="submitData.title"
                placeholder="请输入标题..."
                required
              ></b-form-input>
            </b-col>
            <b-col class="col-xs-1-12">
              <b-button
                variant="outline-success"
                class="my-2 my-sm-0 submit-comment-button"
                type="submit"
                @click="submit"
                :disabled="
                  submitData.title == '' ||
                  submitData.topicId == '' ||
                  submitData.topicId == null
                "
                >发布</b-button
              >
            </b-col>
          </b-row>
        </p>

        <!-- 添加标签 -->
        <p>
          <el-tag
            :key="tag"
            v-for="tag in submitData.tags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>

          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+ 新标签</el-button
          >
        </p>
        <!-- 封面 -->
        <p>
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :http-request="uploadCover">
            <img v-if="submitData.cover " :src="`${this.serveIp}`+submitData.cover " class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon">上传封面图</i>
          </el-upload>
        </p>

        <!-- 编辑器部分 -->
        <div class="editor-content">
          <div id="toolbar-container"></div>
          <!-- <div id="editor">
            <p>请输入内容...</p>
          </div> -->
          <div id="editor">
            <mavon-editor
              ref="md"
              v-model="submitData.sourceContent"
              @imgAdd="$imgAdd"
              @imgDel="imgDel"
              :boxShadow="false"
              @change="changeContent"
              style="height: 100%"
            ></mavon-editor>
            
            <!-- :externalLink="externalLink" -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document";
import { mavonEditor } from "mavon-editor";

import TopicApi from "../api/topic";
import PressApi from "../api/press";
import CommonApi from "../api/common";
import http from "../utils/http";
export default {
  name: "app",
  data() {
    return {
      // externalLink: {
      //   markdown_css: function () {
      //     // 这是你的markdown css文件路径
      //     return "mavon-editor/markdown/github-markdown.min.css";
      //   },
      //   hljs_js: function () {
      //     // 这是你的hljs文件路径
      //     return "mavon-editor/highlightjs/highlight.min.js";
      //   },
      //   hljs_css: function (css) {
      //     // 这是你的代码高亮配色文件路径
      //     return "mavon-editor/highlightjs/styles/" + css + ".min.css";
      //   },
      //   hljs_lang: function (lang) {
      //     // 这是你的代码高亮语言解析路径
      //     return "mavon-editor/highlightjs/languages/" + lang + ".min.js";
      //   },
      //   katex_css: function () {
      //     // 这是你的katex配色方案路径路径
      //     return "mavon-editor/katex/katex.min.css";
      //   },
      //   katex_js: function () {
      //     // 这是你的katex.js路径
      //     return "/mavon-editor/katex/katex.min.js";
      //   },
      // },
      serveIp: "",
      submitData: {
        title: "",
        topicId: null,
        content: "",
        sourceContent: "",
        tags: [],
        cover:null
      },
      moduleList: {},
      inputVisible: false,
      inputValue: "",

    };
  },
  components: { mavonEditor },
  methods: {
    imgDel() {},
    // 缩略图上传
    uploadCover(e) {
      var formdata = new window.FormData();
      formdata.append("file", e.file);
      CommonApi.upload(formdata).then((r) => {
        this.submitData.cover = `${r.data.imgUrl}`;
        
      });
    },
    //缩略图上传显示
    handlePictureCardPreview(file) {
    },
    // 文章中的图片上传处理
    $imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      var formdata = new window.FormData();
      formdata.append("file", $file);
      CommonApi.upload(formdata)
        .then((r) => {
          if (r.code === 200) {
            //第二步 地址替换成服务器上的图片
            this.$refs.md.$img2Url(
              pos,
              `${this.serveIp}${r.data.imgUrl}`
            );
          }
        })
        .catch((e) => {});
    },
    ///////////////////// TAG 标签处理
    handleClose(tag) {
      this.submitData.tags.splice(this.submitData.tags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.submitData.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    ////////////////////END

    changeContent(value, render) {
      this.submitData.content = render;
      this.submitData.sourceContent = value;
    },
    submit() {
      if(this.submitData.id !== undefined) {
        PressApi.updatePress( this.submitData).then((r) => {
          if (r.code === 200) {
            this.$message.success("更新成功");
            setTimeout(() => {
              this.$router.go(-1);
            }, 1000);
          } else {
            this.$message.error(`${r.msg}`);
          }
        });
      }else{

        PressApi.addPress(this.submitData).then((r) => {
        if (r.code === 200) {
          this.$message.success("发布成功");
          setTimeout(() => {
            this.$router.go(-1);
          }, 1000);
        } else {
          this.$message.error(`${r.msg}`);
        }
      });
      }
    },
    getModulesList() {
      TopicApi.getList().then((r) => {
        this.moduleList = r.data;
      });
    },
    getPress() {
      PressApi.getPress(this.$route.query.id).then((r) => {
        if (r.code === 200) {
          this.submitData = r.data;
        }
      });
    },
  },
  mounted() {
    this.getModulesList();
    if(this.$route.query.id !== undefined) {
      this.getPress();
    }
    
    
    CommonApi.getIp().then((r) => {
      this.serveIp = r.data;
    });
  },
};
</script>

<style scoped lang="scss">
@import "mavon-editor/dist/css/index.css";
#app * {
  z-index: 0 !important;
}
.content {
  // min-width: 50%;
  // min-height: 980px;
  max-width: 100%;
  margin: 24px 24px 24px 24px;
  .content-box,
  .author-box,
  .comment-box {
    margin: 0 auto;
    padding: 24px;
    border-radius: var(--box-radius);
    background-color: var(--bg-color);
    backdrop-filter: var(--bg-filter-blur);
    box-shadow: var(--box-shadow);
  }

  .submit-comment-button {
    &:disabled {
      border: 1px solid #ddd;
      color: #ddd;
    }
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
.mavonEditor {
  width: 100%;
  height: 100%;
}

///////////////上传缩略图样式
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
    border: 2px solid #8c939d;
    border-radius: 5px;
    font-size: 14px;
  }
  .avatar {
    width: 128px;
    height: 128px;
    display: block;
  }
/////////////END

// 强行改变高度
::v-deep .v-note-panel {
  min-height: 60vh !important;
}
</style>